<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div style="margin-bottom: 10px;">
      <el-row>
        <el-col :span="24">
          <div>
            <div style="width: 430px; float: right">
              <el-input v-model="operationLogSearch.modules"
                        placeholder="请输入模块名称"
                        @keyup.enter.native="searchEnterFun($event)">
                <i slot="prefix"
                   class="el-input__icon el-icon-search"></i>
                <el-button slot="append"
                           :icon="appendIcon"
                           v-on:click="switchAppend"></el-button>
              </el-input>
            </div>
            <div v-if="showAdvance"
                 id="advance"
                 style="padding: 10px; float: right;">
              <div style="margin-top: 20px; display: flex;">
                <div class="advancedSearchLabel">姓名</div>
                <div style="width: 217px">
                  <el-select
                    v-model="operationLogSearch.userName"
                    clearable
                    filterable
                    placeholder="请输入姓名"
                    size="small" style="width: 217px">
                    <el-option
                      v-for="item in $store.state.userList"
                      :key="item.userName"
                      :label="item.name"
                      :value="item.userName">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-top: 10px; display: flex;">
                <div class="advancedSearchLabel">IP</div>
                <div style="width: 217px">
                  <el-input v-model="operationLogSearch.ip" placeholder="请输入IP" size="small"/>
                </div>
              </div>
              <div style="margin-top: 10px; display: flex;">
                <div class="advancedSearchLabel">事件结果</div>
                <div style="width: 217px">
                  <el-select
                    v-model="operationLogSearch.eventResult"
                    clearable
                    filterable
                    placeholder="请输入事件结果"
                    size="small" style="width: 217px">
                    <el-option
                      v-for="item in CONST.EVENT_RESULT"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-top: 10px; display: flex;">
                <div class="advancedSearchLabel">用户类型</div>
                <div style="width: 217px">
                  <el-select
                    v-model="operationLogSearch.userType"
                    clearable
                    filterable
                    placeholder="请输入用户类型"
                    size="small" style="width: 217px">
                    <el-option
                      v-for="item in CONST.USER_TYPE"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-top: 10px; display: flex;">
                <div class="advancedSearchLabel">时间</div>
                <div style="width: 217px">
                  <el-date-picker
                    v-model="operationLogSearch.timeRange"
                    :picker-options="pickerOptions"
                    align="right"
                    end-placeholder="结束日期"
                    range-separator="至"
                    size="small"
                    start-placeholder="开始日期"
                    style="width: 217px"
                    type="daterange"
                    unlink-panels
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </div>
              </div>

              <div style="margin-top: 30px; right: 10px;">
                <el-row>
                  <el-col :offset="6" :span="6">
                    <div style="margin-left: 90px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="reset">重置</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-table ref="table" :data="tableData" :height="tableHeight" border
                highlight-current-row
                stripe style="width: 100%;">
        <el-table-column label="账号" min-width="60" prop="userName"></el-table-column>
        <el-table-column label="姓名" min-width="60" prop="name"></el-table-column>
        <el-table-column label="模块" min-width="60" prop="modules" show-overflow-tooltip></el-table-column>
        <el-table-column label="事件描述" min-width="100" prop="eventDescribe" show-overflow-tooltip></el-table-column>
        <el-table-column label="事件结果" min-width="60" prop="eventResult" show-overflow-tooltip></el-table-column>
        <el-table-column label="访问路径" mimein-width="60" prop="url" show-overflow-tooltip></el-table-column>
        <el-table-column label="ip" min-width="100" prop="ip"></el-table-column>
        <el-table-column label="时间" min-width="100" prop="updatedTime"></el-table-column>
        <el-table-column label="操作" min-width="60">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="showDetail(scope.row.id)">详情</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 5px;"
                     @current-change="handleCurrentChange"></el-pagination>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      title="详情"
      width="60%">
      <div>
        <el-row>
          <el-col :span="8"><span>姓名:  </span><span style="font-weight: bold">{{ operationLog.name }}</span></el-col>
          <el-col :span="8"><span>模块:  </span><span style="font-weight: bold">{{ operationLog.modules }}</span></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="8"><span>事件结果:  </span><span style="font-weight: bold">{{ operationLog.eventResult }}</span></el-col>
          <el-col :span="8"><span>IP地址:  </span><span style="font-weight: bold">{{ operationLog.ip }}</span></el-col>
        </el-row>
        <div style="margin-top: 10px"><span>时间:  </span><span style="font-weight: bold">{{ operationLog.updatedTime }}</span></div>
        <div style="margin-top: 10px"><span>失败原因:  </span><span style="font-weight: bold">{{ operationLog.failureReason }}</span></div>
        <div style="margin-top: 10px"><span>事件描述:  </span><span style="font-weight: bold">{{ operationLog.eventDescribe }}</span></div>
        <div style="margin-top: 10px"><span>请求参数:  </span><span style="font-weight: bold">{{ operationLog.parameters }}</span></div>
        <div style="margin-top: 10px"><span>请求结果:  </span><span style="font-weight: bold">{{ operationLog.result }}</span></div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "OperationLogTable",
  data() {
    return {
      tableData: [],
      totalNum: 0,
      currentPage: 1, // 第几页
      pageSize: 10, // 每页显示的数据个数
      multiplePages: true,
      tableHeight: '',
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      name: '',
      dialogVisible: false,
      operationLog: {},
      operationLogSearch: {
        currentPage: 1,
        pageSize: 10
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    showDetail(id) {
      this.axios.get('/pmph/action/operationLog/selectLogById', {
        params: {
          id: id
        }
      }).then((response) => {
        this.operationLog = response.data;
        this.dialogVisible = true;
      })
    },
    searchEnterFun(e) {
      this.operationLogSearch.currentPage = 1;
      this.getTableData();
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.operationLogSearch = {
        currentPage: 1,
        pageSize: 10
      };
    },
    advanceConfirm: function () {
      this.operationLogSearch.currentPage = 1;
      this.showAdvance = false;
      this.getTableData();
    },
    handleCurrentChange: function (val) {
      this.operationLogSearch.currentPage = val;
      this.getTableData();
    },
    getTableData() {
      this.axios.post('/pmph/action/operationLog/selectOperationLog', this.operationLogSearch).then((response) => {
        this.noData = response.data.totalNum <= 0;
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
      })
    }
  }
  ,
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 160;
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
